
<template>
    <div class="ant-modal-content">
        <div class="ant-modal-body">
            <el-form>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="会员卡号">
                            <span>{{ fromData.supName }}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <span>{{ fromData.operTime }}</span>
                    </el-col>
                    <el-col :span="6">
                        <span>{{ fromData.number }}</span>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="收款类型">

                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="padding: 10px;">
                    <el-col :span="17">
                        <el-table :data="fromData.page" show-summary :summary-method="getSummaries" border stripe >
                            <el-table-column label="仓库名称" prop="depotName" width="100"/>
                            <el-table-column label="条码" prop="barCode" />
                            <el-table-column label="名称" prop="materialName" />
                            <el-table-column label="规格" prop="standard" />
                            <el-table-column label="型号" prop="model" />
                            <el-table-column label="颜色" prop="color" />
                            <el-table-column label="扩展信息" prop="mfrs" width="100"/>
                            <el-table-column label="库存" prop="totalOperNumber" />
                            <el-table-column label="单位" prop="commodityUnit" />
                            <el-table-column label="数量" prop="operaNumber" />
                            <el-table-column label="单价" prop="commodityDecimal" />
                            <el-table-column label="金额" prop="allspice" />
                            <el-table-column label="备注" prop="remark" />
                        </el-table>
                    </el-col>
                    <el-col :span="1" style="height: 20px;"></el-col>
                    <el-col :span="6">
                        <el-form-item label="单据金额:" data-step="5" data-title="单据金额" data-intro="单据金额等于左侧商品的总金额"
                            class="centered-form-item">
                            <span>{{ fromData.totalPrice }}</span>
                        </el-form-item>

                        <el-form-item label="收款金额:" prop="receiveAmount" data-step="6" data-title="收款金额"
                            data-intro="收款金额为收银员收取用户的实际金额" class="centered-form-item">
                            <span>{{ fromData.changeAmount }}</span>
                        </el-form-item>

                        <el-form-item label="找零:" prop="changeAmount" data-step="7" data-title="找零"
                            data-intro="找零等于收款金额减去实收金额" class="centered-form-item">
                            <span>{{ fromData.backAmount }}</span>
                        </el-form-item>

                        <el-form-item label="收款账户:">
                            <span>{{ fromData.accountName }}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row :gutter="20" style="height: 30px">
            <el-col :span="24" :offset="0">
                <el-form-item style="float: right;">
                   
                    <el-button @click="close">取消</el-button>
                </el-form-item>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
// 导入Vue中的ref和defineEmits函数
import { ref,defineEmits, defineProps } from "vue";
// 使用defineEmits函数定义可以触发的自定义事件
import request from "@/api/request";
let emits = defineEmits(["close"])
let data = defineProps(["data"])
let fromData = data.data


console.log('fromData', fromData)
//根据headerId查询子单据
let findById = () => {
    let id = fromData.id;    // 获取 headerId
    let depId = fromData.depId; // 获取 depotId
    
    // 使用 id 作为 headerId 和 depotId 作为查询参数
    request.get(`/commodity/material/aggregated`, { 
        params: {
            headerId: id, 
            depotId: depId
        } 
    })
    .then(resp => {
        console.log('resp666', resp.data);
  
        fromData.page = resp.data;
        console.log('fromData222', fromData)
      
        
    });
};
findById();
let findByIds = () => {
    let id = fromData.id;    // 获取 headerId
    let depId = fromData.depId; // 获取 depotId
    
    // 使用 id 作为 headerId 和 depotId 作为查询参数
    request.get(`/commodity/material/aggregated`, { 
        params: {
            headerId: id, 
            depotId: depId
        } 
    })
    .then(resp => {
        console.log('resp666', resp.data);
  
        fromData.page = resp.data;
        console.log('fromData222', fromData)
      
        
    });
};
findByIds();
//表格合计
const getSummaries = (param) => {
    const { columns, data } = param;
    const sums = [];

    const operNumbers = data.map((item) => Number(item['operaNumber']));
    const allPrices = data.map((item) => Number(item['allspice']));

    let numberTotal = 0;
    let allPriceTotal = 0;

    operNumbers.forEach(item => {
        numberTotal += item
    })
    allPrices.forEach(item => {
        allPriceTotal += item
    })

    sums[9] = numberTotal
    sums[11] = allPriceTotal

    return sums;
};

let close = () => {
    emits("close");
};
</script>

<style scoped></style>
